<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import TimeZoneData from "../constant/timeZone.js";

export default defineComponent({
  name: "TimeZoneSelect",
  props: {
    width: {
      type: Number,
      default: 450,
    },
    value: {
      // type: Number,
      default: -1,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      currentTimeZone: "GMT+8M",
      currentTimeZoneTitle: "",
      timeZoneListVisible: false,
    });

    watch(
      () => state.currentTimeZone,
      (e) => {
        let Time = "";
        if (typeof e === "number") {
          Time = TimeZoneData[e];
        } else {
          Time = TimeZoneData.find((item) => item.gmt === e);
        }

        state.currentTimeZoneTitle = `(${Time.gmt})${Time.area}`;
        emit("update:value", e);
      }
    );

    watch(
      () => props.value,
      (e) => {
        state.currentTimeZone = e;
      }
    );

    onMounted(() => {
      state.currentTimeZone = props.value;
    });

    const handleTimeZoneChange = (e) => {
      state.currentTimeZone = e;
      handleTimeZoneClick();
    };

    const handleTimeZoneClick = () => {
      state.timeZoneListVisible = !state.timeZoneListVisible;
    };

    return {
      ...toRefs(state),
      TimeZoneData,
      handleTimeZoneChange,
      handleTimeZoneClick,
    };
  },
});
</script>

<template>
  <div
    class="component-time-zone-select-container"
    :style="{ width: `${width}px` }"
  >
    <div
      class="time-zone-show"
      :title="currentTimeZoneTitle"
      @click="handleTimeZoneClick"
    >
      {{ currentTimeZoneTitle }}
    </div>
    <div
      class="time-zone-list"
      :style="{ width: `${width}px` }"
      v-if="timeZoneListVisible"
    >
      <div
        class="time-zone-list-item"
        v-for="(item, index) in TimeZoneData"
        :key="index"
        :title="`(${item.gmt})${item.area}`"
        :class="index === currentTimeZone ? 'active' : ''"
        @click="handleTimeZoneChange(index)"
      >
        {{ `(${item.gmt})${item.area}` }}
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.component-time-zone-select-container {
  position: relative;
  height: 28px;

  .time-zone-show {
    border: 1px solid #a0a0a0;
    height: 100%;
    padding-left: 12px;
    background-color: #fff;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .time-zone-list {
    border: 1px solid #a0a0a0;
    user-select: none;
    cursor: pointer;
    background-color: #fff;
    position: absolute;
    z-index: 2;

    .time-zone-list-item {
      height: 28px;
      line-height: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 12px;

      &.active {
        background-color: #74bcff;
      }

      &:hover {
        background-color: #74bcff60;
      }
    }
  }
}
</style>
